<template>
	<view class="button">
		<view class="titletop">
			<view class="t1">
				简报筛选
			</view>
			<view class="t2">
				权限内/本月
			</view>
		</view>
		<view class="title">
			范围选择
		</view>
		<radio-group class="redio" @change="chan" >
			<label v-for="item in radioGroup" :key="item">
				<radio  :value="item" :checked="item==activeRadio" ref="me" style="display:none;"/>
				<view :class="[ item==activeRadio ? 'blue' : 'p' ,'aa']"  :checked="item==activeRadio">{{item}}</view>
			</label>
		</radio-group>
		
		<view class="title">
			时间选择
		</view>
		<radio-group  class="redio" @change="chan" >
			<label v-for="item in radioGroup1" :key="item">
				<radio  :value="item" :checked="item==activeRadio" ref="me" style="display:none;"/>
				<view :class="[ item==activeRadio ? 'blue' : 'p' ,'aa']"  :checked="item==activeRadio">{{item}}</view>
			</label>
		</radio-group>
		<!-- 自定义开始时间 -->
		<radio-group  class="redio" @change="chan" >
			<label class="kuangblock">
				<radio style="display:none;"/>
				<view class="kuang" >自定义开始时间</view>

				
			</label>
			<view class="heng">－­­</view>
			<label class="kuangblock">
				
				<radio style="display:none;"/>
				<view class="kuang">自定义结束时间</view>
				
			</label>
		</radio-group>
	</view>
</template>

<script>
	export default{
	    data(){
	        return{
	            activeRadio:'', //存的是选中的value值
				radioGroup:['权限内','选部门','选员工','本人'],
				radioGroup1:['本月','上月','本周','今日','昨日','本年','一季度','二季度',"三季度",'四季度'],
				
				
	        }
	    },
	    methods:{
	        chan(e){
	            this.activeRadio = e.detail.value;
	            console.log(this.activeRadio);
				// console.log(item==activeRadio)
	        },
			// b(){
			// 	 this.$refs.me.click();
			// 	   alert('我是aa');
			// }
	    }
	}
</script>

<style scoped lang="scss">
	.button{
		margin: 0  16*2rpx;
		.titletop{
			display: flex;
			justify-content: space-between;
		}
		.title{
			margin:16*2rpx 0 ;
		}
		.redio{
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			.heng{
				text-align: center;
			}
				.kuang{
					width: 130*2rpx;
					height: 40*2rpx;
					margin-bottom: 16*2rpx;
					border: 2rpx solid #C3C3C3;
					border-radius: 40*2rpx;
					text-align:center;
					line-height: 40*2rpx;
				
			}
		}
		.aa{
			width: 110*2rpx;
			height: 40*2rpx;
			margin-bottom: 16*2rpx;
			border: 2rpx solid #C3C3C3;
			border-radius: 40*2rpx;
			text-align:center;
			line-height: 40*2rpx;
		}
		.bag{
			padding: 0 20rpx;
			height: 40*2rpx;
			margin-bottom: 16*2rpx;
			border: 2rpx solid #C3C3C3;
			border-radius: 10%;
			text-align:center;
			line-height: 40*2rpx;;
		}
	}
	.blue{
		background-color: #0062CC;
	}
</style>
